<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >部门经理加班设置</el-button
          >
        </div>
         <tr>
            <td>年份：</td>
            <td>
              <el-select
                v-model="year"
                clearable
                @change="GetUploadAttendancePo()"
                placeholder="请选择"
              >
                <el-option :label="2017" :value="2017"></el-option>
                <el-option :label="2018" :value="2018"></el-option>
                <el-option :label="2019" :value="2019"></el-option>
                <el-option :label="2020" :value="2020"></el-option>
                <el-option :label="2021" :value="2021"></el-option>
                <el-option :label="2022" :value="2022"></el-option>
              </el-select>
            </td>
             <td>月份：</td>
            <td>
              <el-select
                v-model="month"
                clearable
                   @change="GetUploadAttendancePo()"
                placeholder="请选择"
              >
                <el-option :label="1" :value="1"></el-option>
                <el-option :label="2" :value="2"></el-option>
                <el-option :label="3" :value="3"></el-option>
                <el-option :label="4" :value="4"></el-option>
                <el-option :label="5" :value="5"></el-option>
                <el-option :label="6" :value="6"></el-option>
                <el-option :label="7" :value="7"></el-option>
                <el-option :label="8" :value="8"></el-option>
                <el-option :label="9" :value="9"></el-option>
                <el-option :label="10" :value="10"></el-option>
                <el-option :label="11" :value="11"></el-option>
                <el-option :label="12" :value="12"></el-option>
              </el-select>
            </td>
            <td>
                <el-select v-model="authorized_personnel" clearable placeholder="请选择人员">
               <el-option
                v-for="item in namelist"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </td>
            
            <td>
              <el-button type="primary"  @click="AddUploadAttendancePo" >添加权限人员</el-button>
            </td>
          </tr>
        <div>
          <el-table
    :data="tableData"
    border
    style="width: 100%"  >
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="100">
    </el-table-column>
      <el-table-column
      prop="authorized_personnel"
      label="权限人员"
      width="120">
    </el-table-column>
     <el-table-column
      label="部门经理"
      width="200">
      <template>
      <el-button  icon=" el-icon-circle-plus" @click="centerDialogVisible=true"  circle></el-button>
      </template>
    </el-table-column>
     <el-table-column
      label="操作"
      width="200">
      <template slot-scope="scope">
      {{scope.row.department_manager}} <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </template>
    </el-table-column>

  </el-table>  
        </div>
      </el-card>
    </div>
    <div style="height:1500px">
    <el-dialog
  :visible.sync ="centerDialogVisible"
  width="50%" 
  center>
 <h3>选择用户</h3>
 <tr>
              <td>姓名简称</td>
              <td><el-input v-model="name"></el-input></td>
            <td>生产部门：</td>
            <td>
               <el-select v-model="depname" clearable placeholder="全部">
               <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </td>
            <td><el-button type="primary" icon="el-icon-search"></el-button></td>
 </tr>
</el-dialog>
</div>
  </div>
</template>

<script>
import { GetAllDepartment,GetName,GetUploadAttendancePo,AddUploadAttendancePo} from "./AttendanceManagementApi";
export default {
  data() {
    return {
      centerDialogVisible:false,
      depname:null,
      name:null,
      authorized_personnel:null,
      personnel:null,
      year:new Date().getFullYear(),
      month:new Date().getMonth()+1,
      username:null,
       drop_down:[],
       namelist:[],
      tableData: [],
      options: [],
      isShow1: true, 
      isShow2: true, 
    };
  },
   created() {
    this.GetAllDepartment();
    this.GetName();
    this.GetUploadAttendancePo();
  },
  methods: {
     GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      var a=res.data;
        //  a.forEach(r => {
        // this.depname=r;
      //   // return;
      // });

      })
    },
    GetName(){
        GetName().then((res)=>{
            this.namelist=res.data;
        })
    },
    GetUploadAttendancePo(){
        GetUploadAttendancePo(this.year,this.month).then((res)=>{
            this.tableData=res.data;
        })
    },
    AddUploadAttendancePo(){
        if(this.authorized_personnel==null){
            alert("请选择人员")
            return;
        }
        AddUploadAttendancePo(this.authorized_personnel).then((res)=>{
            if(res.data>0){
                alert("添加成功")
                this.$router.go();
            }
        })
    }
  },
};
</script>